<!--选择产品服务组件-->
<template>
    <ul>
        <div class="prod-title">{{titles}}</div>
        <li class="prod-service" :class="{active:item === currentClick}" @click="changeState(item)" v-for="item in services" :key="item">
            <div class="prod-checkbox" style="float: left">
                <input type="checkbox" :checked="item===currentClick" @click="changeCheck">
            </div>
            <div class="prod-icon" style="float: left">
                <img src="//cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1616928992.67528149.png" width="50px">
            </div>

            <div class="prod-service-btn" style="float: left">
                <h3>MiCare保障服务
                    <em>碎屏延保换新</em>
                </h3>
                <i>2年2次碎屏 1年延保维修 1年保值换新</i>
                <br>

                <input type="checkbox" :checked="item===currentClick" @click="changeCheck">
                <i>我已阅读</i>
                <a :href="policys">服务条款</a>
                <span>|</span>
                <a :href="policys">常见问题</a>
            </div>
        </li>
    </ul>
</template>

<script>
    export default {
        name: "ProdService",
        props: ['serviceTitle', 'serviceList'],
        data(){
            return{
                icon: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1616928992.67528149.png",
                policys: "https://api.jr.mi.com/insurance/document/phone_accidentIns.html?insuranceSku=34655&couponFrom=rule",
                titles: this.serviceTitle,
                services: this.serviceList,
                currentClick: 1,
            }
        },
        methods:{
            changeState(currentClick){
                this.currentClick = currentClick
                console.log("item:"+this.item)
                console.log(this.ck)
            },
            changeCheck(){

            }
        },
    }
</script>

<style scoped>
    .prod-service{
        width: 598px;
        height: 145px;
        list-style: none;
        border: 1px solid #e0e0e0;
        text-align: left;
    }

    .prod-service .prod-checkbox{
        width: 20px;
        margin-left: 10px;
        line-height: 145px;
    }

    .prod-service .prod-icon{
        width: 60px;
        /*margin-top: 20px;*/
        line-height: 145px;
    }

    /*售后服务页面布局*/
    .prod-service .prod-service-btn{
        margin-top: 35px;
        width: 457px;
        height: 85px;
    }

    .active{
        border: 1px solid #FF6700;
    }

    .prod-service .prod-service-btn h3{
        font-size: 18px;
    }

    .prod-service .prod-service-btn h3 em{
        height: 25px;
        padding: 0 5px 0 5px;
        font-style: normal;
        font-size: 14px;
        color: #f7f7f7;
        line-height: 25px;
        display: inline-block;
        background-color: #FF6700;
        border-radius: 25px;
    }

    .prod-service .prod-service-btn i{
        font-style: normal;
        font-size: 14px;
        color: #B0B0B0;
    }

    .prod-service .prod-service-btn a{
        text-decoration: none;
        font-size: 14px;
        color: #FF6700;
    }

</style>
